<template>
    <z-paging ref="paging" v-model="list" @query="queryList">
        <template #top>
            <!-- 自定义导航栏 -->
            <u-navbar title="开票申请" title-bold>
                <template #right>
                    <view  class="u-margin-right-20" style="color: #fc4f75" @click="showHistory">查看开票历史</view>
                </template>
            </u-navbar>
        </template>
        <view class="container">
            <invoice-list :list="list" @callback="change"/>
        </view>
        <template #bottom>
            <view class="apply">
                <view class="u-flex u-row-between">
                    <u-checkbox v-model="chooseAll" @change="triggerAll" active-color="#FC4F75">全选</u-checkbox>
                    <text>共 {{ selectNum }} 单</text>
                    <view>
                        <text>合计金额：</text>
                        <text class="u-main-color">￥{{ Number(totalPrice).toFixed(2) }}</text>
                    </view>
                </view>
                <view><u-button type="p" class="invoice-btn" @click="invoice">开票</u-button></view>
            </view>
        </template>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import invoiceList from './child/items.vue'

const list = ref([])
const chooseAll = ref(false)
const selectNum = ref(0)
const totalPrice = ref(0)
const canRequest = ref(false)
const paging = ref<any>(null)
const userStore = useUserStore()

const queryList = (pageNo: number) => {
    uni.$u.$api.OrderApi.queryInvoiceOrderDetail({
        merchantId: userStore.userInfo.merchantId,
        current: pageNo
    })
        .then((res: any) => {
            console.log(res);
            if (pageNo === 1) list.value = []
            res.records.forEach((m: any) => {
                m.check = false
            })
            list.value = list.value.concat(res.records)
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

const showHistory = () => {
    uni.$u.$MRouter.invoiceHistory.to()
}
/** 子项 check 状态改变*/
const change = ({ status, orderNum, total }: { status: boolean; orderNum: number; total: number }) => {
    chooseAll.value = status
    selectNum.value = orderNum
    totalPrice.value = total
}

/** 全选  全不选 */
const triggerAll = ({ value }: { value: boolean }) => {
    list.value.forEach((sku: any) => {
        sku.check = value
    })
    if (!value) {
        selectNum.value = 0
        totalPrice.value = 0
    } else {
        let orderNum = 0 //申请开票的订单数量
        let total = 0 // 开票合计金额
        list.value.forEach((order: any) => {
            orderNum += 1
            total += order.totalPrice
        })
        selectNum.value = orderNum
        totalPrice.value = total
    }
    chooseAll.value = value
}

const invoice = () => {
    let ids: Array<string | number> = []
    list.value.map((m: any) => {
        if (m.check) ids.push(String(m.id))
    })
    if (ids.length === 0) {
        uni.$u.toast('请选择要开具发票的订单!')
        return
    }
    let para = JSON.stringify({ ids: ids, total: totalPrice.value })
    uni.$u.$MRouter.invoiceStep.to({ para })
}
</script>

<style scoped lang="scss">
.apply {
    padding: 30rpx;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    background-color: $uni-bg-color;

    .invoice-btn {
        margin: 30rpx auto;
    }
}
</style>
